<template>
    <div class="body">
        <div class="system"><span>学校通知</span></div>
        <div class="notice_null" v-if="noticeRecordList.length==0">
            <p>您还没有收到学校通知哦！</p>
        </div>
            <div class="notice_item" v-for="(notices,i) in noticeRecordList" :key="i">
                <div class="title">{{notices.notice.title}}</div>
                <div class="time">{{notices.notice.inputTime}}</div>
                <br/>
                <div class="content" v-if="notices.notice.content.length<=5">
                    {{notices.notice.content}}
                </div>
                <div class="content" v-else>
                    <span v-if='notices.notice.all'>{{notices.notice.content}}</span>
                    <span v-else>{{notices.notice.content.slice(0,5) + '...'}}</span>
                    <el-button
                            type="text"
                            :icon="notices.notice.all ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"
                            @click="all(i)"
                    >
                        {{ notices.notice.all ? "收起" : "展开" }}
                    </el-button>
                </div>
                <div class="i" @click="del(notices.id)"><i class="el-icon-delete-solid"></i></div>
            </div>
    </div>
</template>

<script>
    export default {
        name: "WebNoticeView",

        created() {
            this.getNoticeList();
        },

        data(){
            return{
                noticeRecordList:[],
                status:'',
                /*showAll: false,
                allll: true,
                showAll:[],
                allll:[],*/
                content: '',
            }
        },
        methods:{

            //获取通知列表
            getNoticeList(){
                let id;
                if(window.localStorage.getItem("student")!=null){
                    this.status=1;
                    id =  JSON.parse(window.localStorage.getItem("student")).id;
                }
                else{
                    this.status=2;
                    id =  JSON.parse(window.localStorage.getItem("teacher")).id;
                }
                // console.log(id)
                this.$axios.post("/web/noticeRecord/list",'',{params:{id:id,status:this.status}}).then(response=>{
                        //this.noticeRecordList=response.data.data;
                    // console.log(response.data.data);
                    const tableData = response.data.data;
                    for (var i=0;i<tableData.length;i++) {
                        tableData[i].notice.all= false;
                    }
                    this.noticeRecordList = tableData;
                    // console.log(this.noticeRecordList);
                });
            },
            all(i){
                this.noticeRecordList[i].notice.all = !this.noticeRecordList[i].notice.all;
                // console.log(this.noticeRecordList[i].all);
            },
            //删除或阅读评论
            del(id){
                console.log(id)
                this.$confirm('确认删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get("/web/noticeRecord/delete/"+id).then(response=>{
                        this.getNoticeList();
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>

<style scoped>
    .body {
        width: 100%;
        height: 100vh;
        background: url("~@/assets/R-C.jpg") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        margin-left: -20px;
        margin-top: -13px;

    }

    .system{
        background-color: aliceblue;
        border-radius: 10px;
        width: 800px;
        height: 40px;
        margin: 0 auto;
        margin-top: 5px;
        margin-bottom: 20px;
        opacity: 0.9;
    }

    .system span{
        line-height: 40px;
    }

    .notice_null{
        margin-top: 100px;
        text-align: center;
    }

    .notice_null p{
        margin-top: 53px;
        height: 27px;
        font-size: 26px;
        font-weight: 400;
        color: rgba(164,164,164,1);
        line-height: 33px;
    }

    .notice_item{
        background-color: aliceblue;
        border-radius: 10px;
        width: 800px;
        margin: 0 auto;
        margin-bottom: 10px;
        opacity: 0.9;
        position: relative;
        padding: 20px 10px 20px 20px;
    }

    .title{
        float: left;
        font-size: 16px;
        font-weight: 600;
    }
    .time{
        margin-left: 20px;
        float: left;
        font-size: 12px;
        margin-top: 2px;
    }

    .content{
        margin-top: 10px;
        text-align: left!important;
        margin-left: 10px;
        font-size: 18px;
        color: #666;
    }

    .i{
        cursor: pointer;
        float: right;
    }
</style>